<template>
    <div>
        <div class="ymsbanner">
            <h1 class="title">Upload Review Screenshot</h1>
        </div>
        <div class="upload">
            <!-- <h1 class="title">Upload Review Screenshot</h1> -->
            <div class="uploadBox">
                <p>Order ID:</p>
                <span>{{orderId}}</span>
            </div>
            <div class="uploadBox">
                <p>Product:</p>
                <img :src="orderImage" height="120" alt="">
            </div>
            <div class="uploadBox">
                <p>Review Link:</p>
                <el-input class="input" type="text"  v-model="reviewLink" autocomplete="off"></el-input>
            </div>
            
            <div class="uploadBox">
                <p>Review Screenshot: <el-button @click="gotoLink" size="medium" type="primary">GO TO THE COMMENTS</el-button></p>
                <!-- <div style="width: 100%;margin-top: 35px;margin-bottom: 15px;text-align:left">
                    <el-button @click="gotoLink" size="medium" type="primary">GO TO THE COMMENTS</el-button>
                </div> -->
                <div class="uploadFileBox">
                    <input type="file" @change="uploadFile">
                    <img style="float:none" v-if="curImgUrl" :src="curImgUrl" alt="">
                    <i v-else class="el-icon-plus"></i>
                </div>
            </div>
            <el-button class="submitBtn" size="medium" type="primary" @click="submit">SUBMIT</el-button>
        </div>
    </div>
</template>

<script>
    import baseURL from '../../request'
    import axios from 'axios'
    import {post} from '../../api/index'
    export default {
        data() {
            return {
                orderId: '',
                curImgUrl: '',
                reviewLink: '',
                orderImage: '',
                asin: ''
            }
        },
        methods: {
            uploadFile(e) {
                let file = e.target.files[0];
                var formData = new FormData();
                formData.append('file',file);
                axios.post(baseURL + '/common/upload', formData).then(res => {
                    if (res.data.code === 200) {
                        this.curImgUrl = res.data.url;
                        // return
                        // this.$router.push({path:'/gift', query: {customerInformationId: this.orderData.customerInformationId, asin: this.orderData.asin, orderId: this.orderData.orderId}})
                    } else {
                        this.$message({ message: 'Upload failed', type: 'error'});
                    }
                })
            },
            gotoLink() {
                window.open(`https://www.amazon.com/gp/customer-reviews/review-your-purchases/?asin=${this.asin}&channel=ec_dgt&pinnedAsins`)
            },
            submit() {
                let params = {
                    orderId: this.orderId,
                    editCategory: '',
                    commentImage: this.curImgUrl || this.reviewLink
                }
                if (!params.commentImage) {
                    this.$message({ message: 'Please input Review Link or Review Screenshot', type: 'error'});
                    return
                }
                post('/landing_page/recordCustomerStarRating', params).then(res => {
                    if(res.code === 200) {
                        this.$router.push({path:'/thank'})
                    } else {
                        this.$message({ message: 'Error', type: 'error'});
                    }
                })
            }
        },
        mounted() {
            this.orderId =this.$route.query.orderId || '';
            this.orderImage = this.$route.query.orderImage;
            this.asin = this.$route.query.asin;
            if (!this.orderId) {
                this.$router.replace('/');
                return
            }
        }
    }
</script>

<style lang="less" scoped>
.ymsbanner{
    width: 100%;
    height: 150px;
    line-height: 150px;
    background-image: url(../../assets/registration.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title{
        text-align: center;
        font-size: 56px;
        color: #fff;
    }
}
.upload{
    max-width: 650px;
    width: 90%;
    margin: 0 auto;
    margin-top: 60px;
    background: #fff;
    border-radius: 5px;
    .title{
        text-align: center;
        color: #fb9c2e;
        position: relative;
        padding: 10px 0;
        margin-bottom: 10px;
        // font-size: 26px;
        &::before{
            content: '';
            height: 3px;
            width: 80px;
            background: #fb9c2e;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
    .uploadBox{
        padding: 12px 0;
        overflow: hidden;
        p{
            float: left;
            margin-bottom: 12px;
        }
        img,
        span{
            color: #fb9c2e;
            float: right;
        }
        .upload-demo{
            width: 100%;
        }
    }
    .submitBtn{
        width: 100%;
        height: 50px;
        margin-top: 20px;
    }
}
.uploadFileBox{
    float: left;
    min-height: 120px;
    border: 1px solid #aaa;
    width: 100%;
    height: auto;
    position: relative;
    line-height: 120px;
    padding: 15px 10px;
    text-align: center;
    box-sizing: border-box;
    input{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    i{
        font-size: 38px;
    }
    img{
        max-width: 80%;
        max-height: 300px;
        float: none;
    }
}
@media only  screen and  (max-width:900px){
    .ymsbanner{
        background: none;
        height: auto;
        .title{
            height: auto;
            padding: 25px 0;
            color: #fb9c2e;
            line-height: 1;
            font-size: 28px;
        }
    }
    .upload{
        width: 90%;
        margin: 0 auto;
    }
}
</style>